<template>
  <el-dialog :title="`${form.tableId ? '修改' : '添加'}工序`" :visible.sync="show" :close-on-click-modal="false" :show-close="!btnLoading" width="800px" @closed="$refs.form.resetFields()">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
      <el-form-item prop="tableId" class="hide" />
      <el-row>
        <el-col :span="12" :class="{ hide: !showTypeName }">
          <el-form-item label="阶段" prop="typeId">{{ showTypeName }}</el-form-item>
        </el-col>
        <el-col :span="12" :class="{ hide: !showParentName }">
          <el-form-item label="工序上级" prop="parentId">{{ showParentName }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="工序编码" prop="tableCode"><el-input v-model.trim="form.tableCode" placeholder="请输入工序编码" :maxlength="50" /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工序名称" prop="tableName"><el-input v-model.trim="form.tableName" placeholder="请输入工序名称" :maxlength="255" /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="验收对象" prop="unitType">
            <el-select v-model="form.unitType" placeholder="请选择验收对象" default-first-option filterable style="width: 100%">
              <el-option v-for="item in unitTypeEnum" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业类别" prop="specialTypeId">
            <el-select v-model="form.specialTypeId" placeholder="请选择" default-first-option filterable style="width: 100%">
              <el-option v-for="dict in specialTypes" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工程师验收比例" prop="gcsPercent">
            <el-input v-model.trim.number="form.gcsPercent" placeholder="请输入工程师验收比例" :maxlength="6"><template slot="append">%</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监理验收比例" prop="jlPercent">
            <el-input v-model.trim.number="form.jlPercent" placeholder="请输入监理验收比例" :maxlength="6"><template slot="append">%</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目总验收比例" prop="xmzPercent">
            <el-input v-model.trim.number="form.xmzPercent" placeholder="请输入项目总验收比例" :maxlength="6"><template slot="append">%</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目经理验收比例" prop="xmjlPercent">
            <el-input v-model.trim.number="form.xmjlPercent" placeholder="请输入项目经理验收比例" :maxlength="6"><template slot="append">%</template></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序" prop="seq"><el-input-number v-model="form.seq" :min="0" :max="1e8" :precision="0" controls-position="right" style="width: 100%" /></el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="报验是否上传附件" prop="isReqAttch"><el-switch v-model="form.isReqAttch" /></el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="是否防火分区报验" prop="isFirezone"><el-switch v-model="form.isFirezone" /></el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="备注必填标志" prop="isReqRemark"><el-switch v-model="form.isReqRemark" /></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否启用" prop="isEnable"><el-switch v-model="form.isEnable" /></el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :maxlength="255" /></el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 添加或修改工序对话框
import { nameRule, percentRule } from '@/utils/validate'
import { editFormMixin } from '@/utils/mixin'
import { getSpecialTypes } from '@/utils/dict/custom'
import { addCheckTable, updateCheckTable } from '@/api/qualityManage/cq'
// 新建子级时，要继承父级的字段
const InheritedFields = ['unitType', 'specialTypeId', 'gcsPercent', 'jlPercent', 'xmzPercent', 'xmjlPercent']
export default {
  mixins: [editFormMixin],
  data() {
    return {
      primaryKey: 'tableId',
      addApi: addCheckTable,
      updateApi: updateCheckTable,
      form: {
        typeId: '',
        parentId: '',
        tableId: '',
        tableCode: '',
        tableName: '',
        seq: 0,
        unitType: '',
        specialTypeId: '',
        gcsPercent: 0,
        jlPercent: 0,
        xmzPercent: 0,
        xmjlPercent: 0,
        remark: '',
        isReqAttch: false,
        isFirezone: false,
        isReqRemark: false,
        isEnable: true
      },
      rules: {
        tableCode: [{ required: true, message: '请输入工序编码' }, nameRule],
        tableName: [{ required: true, message: '请输入工序名称' }, nameRule],
        unitType: [{ required: true, message: '请选择验收对象' }],
        specialTypeId: [{ required: true, message: '请选择专业类别' }],
        gcsPercent: [{ required: true, message: '请输入工程师验收比例' }, percentRule],
        jlPercent: [{ required: true, message: '请输入监理验收比例' }, percentRule],
        xmzPercent: [{ required: true, message: '请输入项目总验收比例' }, percentRule],
        xmjlPercent: [{ required: true, message: '请输入项目经理验收比例' }, percentRule]
      },
      checkTypeList: [], // 阶段
      checkTableList: [], // 工序
      unitTypeEnum: [], // 验收对象
      specialTypes: [] // 专业类别
    }
  },
  computed: {
    showTypeName() {
      const val = this.form.typeId
      if (!val) return ''
      const item = this.checkTypeList.find(i => i.typeId === val)
      if (!item) return ''
      return `${item.typeCode} - ${item.typeName}`
    },
    showParentName() {
      const val = this.form.parentId
      if (!val) return ''
      const item = this.checkTableList.find(i => i.tableId === val)
      if (!item) return ''
      return `${item.tableCode} - ${item.tableName}`
    }
  },
  created() {
    getSpecialTypes().then(res => (this.specialTypes = res))
  },
  methods: {
    opened(item, { checkTypeList, checkTableList, unitTypeEnum }) {
      this.checkTypeList = checkTypeList
      this.checkTableList = checkTableList
      this.unitTypeEnum = unitTypeEnum
      this.inheritParentValue()
    },
    inheritParentValue() {
      const { tableId, parentId } = this.form
      // 编辑时，或新建非子级时，不处理
      if (tableId || !parentId) return

      const item = this.checkTableList.find(i => i.tableId === parentId)
      if (!item) return

      InheritedFields.map(k => (this.form[k] = item[k]))
    }
  }
}
</script>
